<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw" xml:lang="zh-tw">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Frank的五四三 - CSS Layout, two columns with header and footer</title><link rel="StyleSheet" type="text/css" href="style.css" />
<style type="text/css">
table td {
border: 1px solid #000;
}
#container {
width: 500px;
margin: 0 auto;
}
#header {
background: #EEE;
}
#main {
background: #DDD;
}
#left {
float: left;
width: 150px;
background: #CCC;
}
#center {
float: left;
width: 350px;
background: #BBB;
}
#footer {
clear: both;
background: #AAA;
}
</style>
</head>
  <body>
    <div id="containerDiv">

<!-- start of header -->
<div id="bannerDiv">
您現在所在的位置是：
<a href="index.htm">首頁</a>--&gt;
<a href="article.htm">自由發揮</a>--&gt;
<b>CSS Layout, two columns with header and footer</b></div>
<!-- end of header -->



<!-- start of menu -->
<div id="menuDiv"><ul id="menu"><li><a href="about.htm">關於本站</a></li><li><a href="nba.htm">NBA資料庫</a></li><li><a href="software.htm">軟體下載</a></li><li><a href="link.htm">網站連結</a></li><li><a href="article.htm">自由發揮</a></li><li><a href="http://www.csie.ntu.edu.tw/~b91072/php/gb/">留言討論</a></li></ul></div>
<!-- end of menu -->


<!-- start of main content -->
<div id="contentDiv">
<div id="container">
<div id="header">
This is header div.
</div>
<div id="main">
<div id="left">
left, can be menu bar
</div>
<div id="center">
<table>
<tr>
<td>
	container
	<table>
	<tr>
	<td>
		header
		
	</td>
	</tr>
	<tr>
	<td>
		main
		<table>
			<tr>
			<td>left</td>
			<td>center</td>
			</tr>
			<tr>
			<td colspan="2">footer</td>
			</tr>
		</table>
	</td>
	</tr>
	</table>
</td>
</tr>
</table>
<p>
#container {
width: 500px;
margin: 0 auto;
}
/* fixed width, center alignment. */
</p>
<p>
#header {
background: #EEE;
}
/* choose your background color */
</p>
<p>
#main {
background: #DDD;
}
/* 
choose background color.
background color is the reason why this div exists.
since #left and #center may have different height.
*/
</p>
<p>
#left {
float: left;
width: 150px;
background: #CCC;
}
/*
use float, and fixed width.
*/
</p>
<p>
#center {
float: left;
width: 350px;
background: #BBB;
}
/* float, fixed width */
</p>
<p>
#footer {
clear: both;
background: #AAA;
}
/*
clear both, and put this in the #main.
if #footer is not in #main, background of #main will not appear
*/
</p>
</div>
<div id="footer">
footer, copyright...
</div>
</div>
</div>
</div>
<!-- end of main content -->
</div>
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
    <script type="text/javascript">
_uacct = "UA-879036-3";
urchinTracker();
</script>
  </body>
</html>
